<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="title">车辆绑定</text>
      <text class="subtitle">绑定车辆后可享受更多服务</text>
    </view>
    
    <!-- 绑定表单 -->
    <view class="bind-form">
      <view class="form-item">
        <text class="label">车牌号码</text>
        <input 
          class="input" 
          placeholder="请输入车牌号码" 
          v-model="carInfo.plateNumber"
          maxlength="8"
        />
      </view>
      
      <view class="form-item">
        <text class="label">车辆品牌</text>
        <picker 
          mode="selector" 
          :range="brands" 
          @change="onBrandChange"
        >
          <view class="picker">
            {{ selectedBrand || '请选择车辆品牌' }}
          </view>
        </picker>
      </view>
      
      <view class="form-item">
        <text class="label">车辆型号</text>
        <input 
          class="input" 
          placeholder="请输入车辆型号(可选)" 
          v-model="carInfo.model"
        />
      </view>
      
      <view class="form-item">
        <text class="label">车辆颜色</text>
        <input 
          class="input" 
          placeholder="请输入车辆颜色(可选)" 
          v-model="carInfo.color"
        />
      </view>
      
      <button class="bind-btn" @click="bindCar">绑定车辆</button>
    </view>
    
    <!-- 已绑定车辆 -->
    <view class="bound-section" v-if="boundCars.length > 0">
      <view class="section-header">
        <text class="section-title">已绑定车辆</text>
      </view>
      <view class="car-list">
        <view class="car-item" v-for="(car, index) in boundCars" :key="car.id">
          <view class="car-info">
            <text class="car-plate">{{ car.plateNumber }}</text>
            <text class="car-brand">{{ car.brand }}</text>
          </view>
          <button class="unbind-btn" @click="unbindCar(index)">解绑</button>
        </view>
      </view>
    </view>
    
    <!-- 温馨提示 -->
    <view class="tips">
      <text class="tip-title">温馨提示</text>
      <text class="tip-content">1. 一辆车只能绑定一个账户</text>
      <text class="tip-content">2. 绑定车辆可享受专属优惠</text>
      <text class="tip-content">3. 解绑后相关权益将失效</text>
    </view>
  </view>
</template>

<script>
import api from '../../api/index.js'
import store from '../../store/index.js'

export default {
  data() {
    return {
      carInfo: {
        plateNumber: '',
        brand: '',
        model: '',
        color: ''
      },
      brands: [
        '特斯拉', '比亚迪', '蔚来', '小鹏', '理想', '宝马', '奔驰', '奥迪', '大众', '丰田', '本田', '吉利', '长城', '奇瑞'
      ],
      selectedBrand: '',
      boundCars: []
    }
  },
  onLoad() {
    this.getBoundCars()
  },
  methods: {
    // 获取已绑定车辆
    async getBoundCars() {
      try {
        const res = await api.car.getBindCars()
        if (res.code === 200) {
          this.boundCars = res.data
          // 更新store中的车辆信息
          if (res.data.length > 0) {
            store.commit('SET_CAR_INFO', res.data[0])
          }
        }
      } catch (error) {
        console.error('获取绑定车辆失败:', error)
      }
    },
    
    // 品牌选择变化
    onBrandChange(e) {
      this.selectedBrand = this.brands[e.detail.value]
      this.carInfo.brand = this.selectedBrand
    },
    
    // 绑定车辆
    bindCar() {
      if (!this.carInfo.plateNumber) {
        uni.showToast({
          title: '请输入车牌号码',
          icon: 'none'
        })
        return
      }
      
      if (!this.carInfo.brand) {
        uni.showToast({
          title: '请选择车辆品牌',
          icon: 'none'
        })
        return
      }
      
      // 模拟绑定车辆
      const newCar = {
        id: this.boundCars.length + 1,
        plateNumber: this.carInfo.plateNumber,
        brand: this.carInfo.brand,
        model: this.carInfo.model || '未填写',
        color: this.carInfo.color || '未填写'
      }
      
      this.boundCars.push(newCar)
      
      // 更新store
      store.commit('SET_CAR_INFO', newCar)
      
      uni.showToast({
        title: '绑定成功',
        icon: 'success'
      })
      
      // 清空表单
      this.carInfo = {
        plateNumber: '',
        brand: '',
        model: '',
        color: ''
      }
      this.selectedBrand = ''
    },
    
    // 解绑车辆
    unbindCar(index) {
      uni.showModal({
        title: '提示',
        content: '确定要解绑该车辆吗？',
        success: (res) => {
          if (res.confirm) {
            this.boundCars.splice(index, 1)
            uni.showToast({
              title: '解绑成功',
              icon: 'success'
            })
            
            // 如果解绑的是store中的车辆，清空store
            if (this.boundCars.length === 0) {
              store.commit('SET_CAR_INFO', { id: '', plateNumber: '', brand: '' })
            } else {
              // 否则更新为第一个绑定的车辆
              store.commit('SET_CAR_INFO', this.boundCars[0])
            }
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.page-header {
  text-align: center;
  margin-bottom: 40rpx;
}

.title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 24rpx;
  color: #999;
}

.bind-form {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.label {
  display: block;
  font-size: 28rpx;
  margin-bottom: 15rpx;
  color: #333;
}

.input {
  width: 100%;
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.picker {
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #666;
}

.bind-btn {
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 32rpx;
  margin-top: 20rpx;
}

.bound-section {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.section-header {
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
}

.car-list {
  border-top: 1rpx solid #f5f5f5;
  padding-top: 20rpx;
}

.car-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.car-item:last-child {
  border-bottom: none;
}

.car-info {
  flex: 1;
}

.car-plate {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.car-brand {
  font-size: 24rpx;
  color: #999;
}

.unbind-btn {
  background-color: #ff3b30;
  color: #fff;
  border: none;
  border-radius: 5rpx;
  padding: 10rpx 20rpx;
  font-size: 24rpx;
}

.tips {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
}

.tip-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.tip-content {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.tip-content:last-child {
  margin-bottom: 0;
}
</style>